<template>
    <div>
        <section class="container">
             <!-- 左 -->
             <section class="itemLeft">
                <EchartsPage>
                    <!-- 插槽入口 -->
                    <template #main>
                        <EchartsOne />
                    </template>
                </EchartsPage>
              </section>
              <section class="itemRight">
                <EchartsPage>
                    <!-- 插槽入口 -->
                    <template #main>
                       <EchartTwo/>
                    </template>
                </EchartsPage>
              </section>
        </section>
    </div>
</template>


<script setup lang="ts">
import EchartsPage from '../../components/EchartsPage.vue'
import EchartsOne from '../../components/EchartsOne.vue'
import EchartTwo from '../../components/EchartTwo.vue'
</script>


<style lang="scss">
// 主体容器样式
.container {
  width: 100%;
  margin: 0 auto;
//   background-color: gray;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 设置左中右的占比
  .itemLeft,
  .itemRight {
    flex: 1;
  }
}
</style>